<template>
  <div id="dataEcharts" style="height: 398px;" />
</template>
<script>
    import * as echarts from "echarts";
    export default {
        props:{
            data:{
                type:Array,
                default:[]
            }
        },
        data() {
            return {
                dataEcharts: null
            }
        },
        created() {
            let t = [];
            this.data.map(i=>{
                t.push({
                    value:i.percentage,
                    name:i.gameName,
                    weishoujine:i.bigDecimal,//未售金额
                    yichang:i.abnormalBigDecimal,//异常金额
                    zongshu:i.singular//总数
                })
            });

            this.$nextTick(() => {
                this.dataEcharts = echarts.init(document.getElementById('dataEcharts'), "macarons");
                this.dataEcharts.setOption({
                    tooltip: {
                        trigger: "item",
                        formatter:function(a,b,c,d){
                            let name = a.data.name + "<br/>";
                            let kc = "库存总数：" + a.data.zongshu + "个<br/>";
                            let yc = "异常金额：" + a.data.yichang + "元<br/>";
                            let ws = "未售金额：" + a.data.weishoujine+ "元";
                            return `${name}${kc}${yc}${ws}`;
                        },
                    },
                    grid:{
                      top:'2%'
                    },
                    series: [{
                            name: "数据大盘",
                            type: "pie",
                            data: t,
                            animationEasing: "cubicInOut",
                            animationDuration: 1000,
                        }
                    ]
                });

                let that = this;
                window.addEventListener('resize',  ()=> {
                    that.dataEcharts.resize()
                });
            })
        }
    }
</script>
